<template>
  <div :class="style.wrap">

    <my-sidebar active="tree"/>

    <div class="main">

      <el-form :inline="true" size="mini" @submit.native.prevent="GetTree">
        <el-form-item label="账号">
          <el-input v-model="where['mobile']"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
          <el-button @click="ClearTree()">清除</el-button>
        </el-form-item>
      </el-form>

      <div class="tree">
        <div v-for="(vo, index) in parents" class="level-line" :key="index">
          <div v-if="vo" class="box link" @click="Search(vo)">{{ vo }}</div>
          <div v-else class="box"/>
        </div>
        <div class="level-line">
          <div class="box self">{{ self.mobile }}</div>
        </div>
        <div class="level-line">

          <div v-if="children.left" class="sub-box">
            <div class="level-line">
              <div class="box link" @click="Search(children.left.account)">{{ children.left.account }}</div>
            </div>
            <div class="level-line">
              <div v-if="children.left.left" class="box link" @click="Search(children.left.left.account)">{{ children.left.left.account }}</div>
              <div v-else class="box">?</div>
              <div v-if="children.left.right" class="box link" @click="Search(children.left.right.account)">{{ children.left.right.account }}</div>
              <div v-else class="box">?</div>
            </div>
          </div>
          <div v-else class="sub-box">
            <div class="level-line">
              <div class="box">?</div>
            </div>
            <div class="level-line">
              <div class="box">?</div>
              <div class="box">?</div>
            </div>
          </div>

          <div v-if="children.right" class="sub-box">
            <div class="level-line">
              <div class="box link" @click="Search(children.right.account)">{{ children.right.account }}</div>
            </div>
            <div class="level-line">
              <div v-if="children.right.left" class="box link" @click="Search(children.right.left.account)">{{ children.right.left.account }}</div>
              <div v-else class="box">?</div>
              <div v-if="children.right.right" class="box link" @click="Search(children.right.right.account)">{{ children.right.right.account }}</div>
              <div v-else class="box">?</div>
            </div>
          </div>
          <div v-else class="sub-box">
            <div class="level-line">
              <div class="box">?</div>
            </div>
            <div class="level-line">
              <div class="box">?</div>
              <div class="box">?</div>
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      where: {},
      self: {},
      parents: ['', ''],
      children: {}
    }
  },
  methods: {
    /**
       * 获取数据
       */
    GetTree() {
      const params = { parent_num: 2 }
      this.$http.get('/auth/member-persons/' + this.where.mobile + '/tree', { params })
        .then(response => {
          this.self = response.resource.self
          this.parents = response.resource.parents
          this.children = response.resource.children
        })
        .catch(response => {
          if (response.status_code === 404) response = '没有查询到相关信息'
          this.$error(response)
        })
    },
    /**
       * 清除查询
       */
    ClearTree() {
      this.where = {}
      this.self = {}
      this.parents = ['', '']
      this.children = {}
    },
    /**
       * 点击节点跳转查询
       */
    Search(account) {
      this.where.account = account
      this.GetTree()
    }
  }
}
</script>

<style module="style" lang="less">
  .wrap :global {

    .tree {
      width: 1100px;
      margin-top: 50px;
      background: url(/static/img/tree-bg.png) no-repeat;
      background-size: 76% auto;
      background-position: 132px 40px;

      .level-line {
        position: relative;
        text-align: center;
        font-size: 0;
        margin-bottom: 80px;
        letter-spacing: 120px;
        white-space: nowrap;

        .sub-box {
          display: inline-block;

          .level-line {
            letter-spacing: 30px;
          }
        }

        .box {
          display: inline-block;
          width: 18em;
          letter-spacing: normal;
          font-size: 12px;
          height: 30px;
          line-height: 30px;
          border: dashed 1px #b9bbff;
          border-radius: 10px;

            &.self {
              border-color: #3f51b5;
              background-color: #d3d4ff!important;
            }

            &.link {
              background-color: #ecedf8;

              &:hover {
                cursor: pointer;
                background-color: #e4e4ff;
              }
            }
        }
      }
    }
  }
</style>
